* { margin: 0; padding: 0;}

@font-face
{
	font-family: 'Press Start 2P', cursive;
	 
}

body, html
{
	height:100%;
/*	background-image: url("lights.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
	z-index:-100;
		font-family: 'Press Start 2P', cursive;
	overflow: hidden; 
	position:absolute;
	width:100%;
	/*background-image :"url('metroid/metroidfiller.gif'), url('metroid/metroidfiller.gif')";*/
/*  image-rendering:optimizeSpeed;             /* Legal fallback 
  image-rendering:-moz-crisp-edges;          /* Firefox        
  image-rendering:-o-crisp-edges;            /* Opera          
  image-rendering:-webkit-optimize-contrast; /* Safari         
  image-rendering:optimize-contrast;         /* CSS3 Proposed  
  image-rendering:crisp-edges;               /* CSS4 Proposed  
  image-rendering:pixelated;                 /* CSS4 Proposed  
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */

}

.header-link{
	font-size:100px; 
	z-index: 1;
	 width:30%; 
	  margin:0 auto;
	   text-align:center;
	   position:absolute;
	   /*width:400px;*/
	   float:right;
}
.inline:nth-child(1) .header-link{
	left:0%;
}
.inline:nth-child(2) .header-link{
	left:20%;
}
.inline:nth-child(3) .header-link{
	left:40%;
}
.header-link a{
	font-size: .25em;
}
a
{
	font-size: .6em;
	text-decoration: none;
	color: #FFFFFF;
}

img { 
	image-rendering: optimizeSpeed;             /* FUCK SMOOTHING, GIVE ME SPEED  */
 	image-rendering: -moz-crisp-edges;          /* Firefox                        */
 	image-rendering: -o-crisp-edges;            /* Opera                          */
 	image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
 	image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
 	-ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
 	height:100%
      }

#maincanvas
{
	height:100%;
	width:100%;
	z-index:0;
	left:0px;
	right:0px;
	
	position:absolute;
	tabindex:1;
}


.inline
{
	display:inline-block;
 
}

.score
{
	font-size: 3em;
	z-index:1;
	position:absolute;
}

#points
{
	 
}

.time
{
	font-size: 3em;
	text-align:right;
	z-index:1; 
}

#seconds
{
	text-align:right;
}

#content {
	
	z-index:2;
	top:10%;
	height:90%;
	width:100%;
	position:absolute;
}
.reading{
	width:80%;
	line-height: 1.4em;
font-size: 1em; 
position: relative;
z-index: -2;
}

.reading p{
	padding-bottom:20px;
}
.header
{
	z-index:2;
	position:absolute;
	height: 10%;
	width:100%;
}
.clearfix
{

	clear:both;
}
@keyframes myfirst
{
0%   { -webkit-transform: translate(5000px, 0px);} 
100% { left:0px; }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {  -webkit-transform: translate(5000px, 0px);} 
100% { left:0px; }
}

@keyframes slideUp
{
0%   { -webkit-transform: translate(0px, 40px);} 
100% { -webkit-transform: translate(0px, 0px); }
}

@-webkit-keyframes slideUp /* Safari and Chrome */
{
0%   { z-index: -1; -webkit-transform: translate(0px, 40px);} 
99% {z-index: -1; -webkit-transform: translate(0px, 0px); }
100%{ z-index: 0;}
}

.slide
{
 	 
	animation: myfirst .4s;
-webkit-animation: myfirst .4s; /* Safari and Chrome */
}

.active-powerup{
	animation: slideUp 1s;
-webkit-animation: slideUp 1s;
-webkit-animation-timing-function: ease;
position: relative;
/*z-index: -1;*/
top: -95px;
display:block;
text-align: center;
/* margin: auto; */
width: 150px;
padding-left: 30px;
}
.filler{
	height: 400px;
	width:400px;
}
.powerup{
	width: 150px;
height: 20px;
background: url("brick.jpg");
display: block;
padding: 30px;
text-align: center;
margin-top: 40px;
}
.powerup-container a{
height: 100%;
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.powerup-container{ 
width: 200px;
background-image: url("brick.jpg");
z-index: 10;
height: 40px;
text-align: center;
color: white;
top:10px;
position: relative;
padding-top:20px;
}
.hidden{
	visibility: hidden;

}

.left{
	float:left;
}

.test{
	image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}

.metroid-canvas{
	background-image: url('metroid/metroid filler 2.png');
background-size: contain;
}